import { Modal, Form, InputNumber } from 'antd';
import * as React from 'react';

class ServiceTracingEnableModalForm extends React.Component {
  render() {
    const inputProps = this.props.form.getFieldProps('times', {
      initialValue: 5
    });
    return (
      <Form horizontal form={this.props.form}>
        <Form.Item labelCol={{ span: 6 }} wrapperCol={{ span: 14 }}
          label="追踪次数：" help="不建议填写过大数值,此功能将会影响系统性能,请酌情使用">
          <InputNumber required {...inputProps} placeholder="输入追踪次数" style={{width:200}}/>
        </Form.Item>
      </Form>
    )
  }
}

ServiceTracingEnableModalForm = Form.create({})(ServiceTracingEnableModalForm);

class ServiceTracingEnableModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: false }
  }

  showModal() {
    this.setState({
      visible: true
    });
  }

  handleOk() {
    const form = this.refs.form;
    const serviceId = this.props.serviceId;

    form.validateFieldsAndScroll((errors, values) => {
      if (!!errors) {
        return;
      }
      const times = form.getFieldValue("times")

      this.setState({
        confirmLoading: true
      });

      this.props.onSave(serviceId, times)
        .then(()=> {
          this.setState({
            visible: false,
            confirmLoading: false
          });
        });
    })
  }

  handleCancel() {
    this.setState({
      visible: false
    });
  }

  render() {
    return (
      <Modal title="开启追踪"
        visible={this.state.visible}
        onOk={::this.handleOk}
        confirmLoading={this.state.confirmLoading}
        onCancel={::this.handleCancel}>
        <ServiceTracingEnableModalForm ref="form"/>
      </Modal>
    );
  }
}

export default ServiceTracingEnableModal;
